<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
        <%
	String path = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort();
	String basePath = path  + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">

<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery.min.js"></script>
<script src="layui/layui.js"></script>

<title>Insert title here</title>
</head>
<body>


<form action="" class="layui-form">
<div class="layui-form-item">
 
  <div class="layui-inline">
     <label class="layui-form-label">姓名</label>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="text"  id="name" placeholder="" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-inline">
    <label class="layui-form-label">部门</label>
    <div class="layui-input-inline" style="width: 100px;">
    <select name="" id="bumen1">
    
    </select>
    </div>
  </div>
  
    <div class="layui-inline">
    <button type="button" class="layui-btn" onclick="sousuo();">搜索</button>
    </div>
</div>


</form>

<table id="demo" lay-filter="test"></table>
</body>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="batchDelete">删除</button>
  </div>
</script>
<script type="text/javascript">

$(function (){
	bumen();
	
	
})


layui.use(['table','form'], function(){
  var table = layui.table;
  var from = layui.form;
  from.render(); 
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,url: 'attendence/list' //数据接口
    ,page: true,
	toolbar: '#toolbarDemo'//开启分页
    ,cols: [[ //表头
   	 {checkbox: true},
   
      ,{field: 'attendld', title: 'ID', width:80, sort: true}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'staffname', title: '员工姓名', width:80} 
      ,{field: 'department.deptname', title: '部门', width: 177,templet:function(d){
    	  if(d.department){
    		  return d.department.deptname;
    		  
    	  }
    	  return "-";
      }}
      ,{field: 'attenddate', title: '考勤日期', width: 180, sort: true}
      ,{field: 'attendin', title: '签到时间', width: 90, sort: true}
      ,{field: 'attendout', title: '签退时间', width: 90}
      ,{field: 'remark', title: '备注', sort: true}
    ]]
  });
  
  
  table.on('toolbar(test)',function(obj){
	  switch(obj.event){
	  case'batchDelete':
		  batchDelete();
		  break;
	  
	  }
	  
  })
  
  
});



	

function batchDelete(){
	var checkStatus= layui.table.checkStatus('demo');
	if(checkStatus.data.length==0){
		layui.layer.msg('选中一条');
		return;
		
	}
	
	layer.confirm('删除吗',{icon:3,title:'提示'},function(index){
		
		var deleteids=[];
		$.each(checkStatus.data,function (){
			deleteids.push(this.attendld);
			
		});
		$.get("attendence/delete",{"ids":deleteids.join(",")},function(data){
			sousuo();
			
		})
		layer.close(index);
	});
}

function sousuo(){
	layui.table.reload('demo',{
		where:{
			staffname:$("#name").val(),
			 "department.deptld":$("#bumen1").val() 
		},
		page:{
			curr:1 
			
		}
		
	})
	
	
}
function bumen(){
	 $.get('attendence/bumen',function(data){
		 $.each(data,function(){
			$("<option></option>").val(this.deptld).text(this.deptname).appendTo("#bumen1")
			 
		 });
		layui.form.render("select"); 
	 });
	
}
</script>

</html>